<template>
  <div class="me-header">
    <van-cell-group inset>
      <van-cell
        is-link
        :to="'/login'"
        :clickable="true"
        v-if="!(user && user.token)"
      >
        <template>
          <div>账号密码登录</div>
        </template>
        <template #title>
          <div>登录财金通</div>
        </template>
      </van-cell>
      <van-cell is-link v-else>
        <template>
          <div class="cell-header">
            <van-image width="30" height="30" :src="user.avatar" />
            <div class="right-header">
              <div class="author">
                {{ user.nickname }}
              </div>
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template>
          <van-grid :border="false">
            <van-grid-item icon="./imgs/me1.png" text="收藏"></van-grid-item>
            <van-grid-item icon="./imgs/me2.png" text="评论"></van-grid-item>
            <van-grid-item icon="./imgs/me3.png" text="赞过"></van-grid-item>
            <van-grid-item icon="./imgs/me4.png" text="最近"></van-grid-item>
          </van-grid>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Cell, CellGroup, Grid, GridItem, Image as VanImage } from "vant";

export default {
  name: "MeHeader",
  computed: {
    ...mapState(["user"]),
  },
  components: {
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-image": VanImage,
    "van-grid": Grid,
    "van-grid-item": GridItem,
  },
};
</script>

<style scoped lang="less">
.me-header {
  padding-top: 1rem;
}

.cell-header {
  display: flex;
  align-items: center;
}

.right-header {
  margin: 0 0.2rem;
  color: #999;
}
</style>
